<template>
  <div class="wrapper">
    <header> 
      <van-nav-bar :title="title" :fixed="true"/>
    </header>
    <main>
      
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <router-view @toparent="getval"></router-view>
        </van-pull-refresh>
    </main> 
    <van-tabbar class="footer" v-model="active">
     <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
     <van-tabbar-item icon="shop-o" to="/supermarket">超市</van-tabbar-item>
     <van-tabbar-item icon="friends-o" to="/cart">购物车</van-tabbar-item>
     <van-tabbar-item icon="setting-o" to="/myself">我的</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
export default {
    name:'Index',
    data(){
      return{
        active:0,
        title:'首页',
        isLoading:false
      }
    },
    methods:{
      getval(msg){
        this.title=msg[0]
        this.active = msg[1]
      },
      onRefresh(){
        setTimeout(()=>{
            this.$toast('刷新成功');
            this.isLoading=false;
            this.count++;
          },500)
      }
    }
}
</script>

<style scoped>
  .wrapper{
    display: flex;
    flex-direction: column;
  }
  header{
    height: 44px;
    background: mediumseagreen;
  }
 main{
   /* padding-top: 10px; */
   margin-bottom:50px;
   flex:1;
 } 
 .footer{
   height:55px;
   bottom:-2px;
 }
</style>